<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="author-wrapper">
            <div class="box">
            <el-form class="app-content" label-width="130px" :model="ruleForm" ref="ruleForm" :rules="rules">
                <div class="app-title"><h3>修改权限</h3></div>  
                <div class="app-top">角色与备注</div>  
                <template v-if="!$route.params.flag">
                    <el-row :gutter="21" class="formAuthor">
                        <el-col :span="8">
                            <el-form-item label="权限角色名称：">
                                <div class="auhor-name author-text-input" v-text="ruleForm.sName"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="备注信息：">
                                <div class="author-text-input" v-text="ruleForm.sDesc"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
                <template v-else>
                    <el-row :gutter="21" class="formAuthor">
                        <el-col :span="8">
                            <el-form-item label="权限角色名称" prop="sName">
                                <el-input v-model="ruleForm.sName" placeholder="请输入权限角色名称" :maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="备注信息" prop="sDesc">
                                <el-input v-model="ruleForm.sDesc" placeholder="请输入备注信息" :maxlength="20"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </template>
            </el-form>
            <el-form class="app-content">
                <div class="app-top">权限选择</div>
                    <el-row :gutter="21">
                        <div class="authority-list-wrapper">
                             <tree-author
                                v-for="item in authorTreeData"
                                :model="item"
                                :key="item.id" 
                             ></tree-author>
                        </div>
                    </el-row>
                    <el-form-item class="footer">
                        <el-button @click="cancelForm">返回</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    </el-form-item>
            </el-form>
            </div>
            <div class="authority-list-wrapper"></div>
        </div>
    </div>
</template>

<script>
import { getSysRole, updateSysRole } from 'api/system.js';
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import treeAuthor from './comps/treeAuthor.vue'
export default {
    name: 'editAuthor',
    components: {
        Levelbar,
        TableLayout,
        treeAuthor
    },
    data() {
        return {
            ruleForm: {
                sName: '',
                sDesc: '',
                pId: ''
            },
            rules: {
                sName: [
                    { required: true, message: '请输入权限角色名称', trigger: 'blur' },
                    { max: '20', message: '字符长度不大于20个！', trigger: 'change'}
                ],
                sDesc: [
                    { required: true, message: '请输入备注信息', trigger: 'blur' },
                    { max: '20', message: '字符长度不大于20个！', trigger: 'change'}
                ]
            },
            authorTreeData: []
        }
    },
    created() {
        this._getSysRole();
    },
    methods: {
        resetForm() {
            // console.log('resetForm');
        },
        submitForm(ruleForm) {
            let menuList = this.getCheckId(this.authorTreeData); // 角色对应的菜单

            if (!menuList.some((menu, index) => {
                return menu.checked == true;
            })) {
                this.$message({
                    message: '请至少选中一个界面权限',
                    type: 'info'
                });
                return;
            }

            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    
                    this._updateSysRole({
                        menuList,
                        ...this.ruleForm
                    });
                    this.$store.dispatch('UpdateCache', true);
                } else {
                    return false;
                }
            });
        },
        getCheckId(data) {
            var menuList = [];
            // var res =[];
            data.forEach(item => {
                menuList.push({'id': item.id, 'checked': ((item.checked === null||!item.isOpera) ? false: item.checked)});
                if (item.children) {
                    var res = this.getCheckId(item.children);
                    menuList = menuList.concat(res);
                }
            })
            return menuList;
        },
        treeData(data, parentId, level) {
            let result = [];
            let temp;
            // 学校负责人默认有这个菜单，教师班主任默认不可以添加
            var menuArr = ['1006'];
            for (let i = 0; i < data.length; i++) {
                if (data[i].parentId == parentId) {
                    let obj = {
                        menuName: data[i].menuName,
                        id: data[i].id,
                        checked: data[i].checked,
                        selected: false,
                        level,
                        checkEnabled: data[i].checkEnabled,
                        isOpera: !((menuArr.indexOf(data[i].id) > -1)&&data[i].checked != true) // // 学校负责人默认有这个菜单，教师班主任默认不可以添加
                    };
                    temp = this.treeData(data, data[i].id, level + 1);
                    if (temp.length >= 0) {
                        obj.children = temp;
                    }
                    result.push(obj);
                }
            }
            return result;
        },
        // 获取数据
        _getSysRole() {
            let pId = this.$route.params.pId;
            getSysRole(pId).then((res) => {
                // console.log(res);
                this.ruleForm.sName = res.data.content.sName;
                this.ruleForm.sDesc = res.data.content.sDesc;
                this.ruleForm.pId = res.data.content.pId;
                this.authorTreeData = this.treeData(res.data.content.menuList, null, 1);
            })
        },
        // 更新数据
        _updateSysRole(json) {
            updateSysRole(json).then((res) => {
                this.$message({
                    message: '角色修改成功！',
                    type: 'success'
                });
                this.$router.push({
                    path: '/authority/index'
                })
            })
        },
        // 取消
        cancelForm() {
            this.$router.go(-1);
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.app-container {
  padding-bottom: 0;
  .box {
    padding: 0px 50px 40px;
    background: #fff;
    box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .app-title {
    text-align: center;
    font-size: 18px;
    color: #333;
    height: 78px;
    line-height: 78px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
  }
  .formAuthor {
    padding-bottom: 5px;
  }
     .app-top {
    font-size: 14px;
    text-indent: 16px;
    border-left:4px solid #ff5e2c;
    height: 14px;
    line-height: 14px;
    margin:40px 0px;
  }
}
.footer {
  text-align: center;
  margin-top: 60px;
  .el-button {
    width: 120px;
    height: 40px;
    margin: 0 20px;
  }
}
</style>

